<template>
  <div class="container-set">
    <el-card>
      <div slot="header">
        <my-bread>个人设置</my-bread>
      </div>
      <!-- 栅格 -->
      <el-row>
        <!-- 信息修改 -->
        <el-col :span="12">
          <el-form label-width="120px">
            <el-form-item label="编号">{{id}}</el-form-item>
            <el-form-item label="手机">{{mobile}}</el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="userForm.name"></el-input>
            </el-form-item>
            <el-form-item label="简介">
              <el-input v-model="userForm.intro" type="textarea" :rows="3"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="userForm.email"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="changeUser">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 头像上传 -->
        <el-col :span="12">
          <el-upload
            class="avatar-uploader"
            action
            :http-request="changePhoto"
            :show-file-list="false"
          >
            <img v-if="userForm.photo" :src="userForm.photo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <p class="text">修改头像</p>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
// 引入事件总线
import eventBus from "@/eventBus";
import auth from "@/utils/auth";
export default {
  name: "setting-page",
  data() {
    return {
      userForm: {
        id: null,
        mobile: null,
        name: null,
        intro: null,
        email: null,
        photo: null
      }
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    // 修改用户图片
    async changePhoto({ file }) {
      try {
        // 选中图片,得到数据(有默认参数file)
        // 组装成formData对象
        const formData = new FormData();
        formData.append("photo", file);
        // 使用axios提交数据
        const {
          data: { data }
        } = await this.$http.patch("/user/photo", formData);
        // 上传成功提示
        this.$message.success("修改头像成功");
        // 预览到页面
        this.userForm.photo = data.photo;
        // 同步更新layout组件用户头像:事件总线
        eventBus.$emit("updatePhoto", data.photo);
        // 同步本地存储用户信息:拿出-修改-存储
        const localUser = auth.getUser();
        localUser.photo = data.photo;
        auth.setUser(localUser);
      } catch (e) {
        // 失败提示
        this.$message.error("修改头像失败");
      }
    },
    // 获取用户信息
    async getUserInfo() {
      const {
        data: { data }
      } = await this.$http.get("/user/profile");
      this.userForm = data;
    },
    // 编辑保存用户信息
    async changeUser() {
      try {
        const { name, intro, email } = this.userForm;
        // 发送请求
        await this.$http.patch("/user/profile", { name, intro, email });
        this.$message.success("修改用户名成功");
        // 同步layout组件中的用户信息
        eventBus.$emit("updateUser", name);
        // 同步本地存储用户信息:拿出-修改-存储
        const localUser = auth.getUser();
        localUser.name = name;
        auth.setUser(localUser);
      } catch (e) {
        // 更改失败时
        // console.dir(e);
        if (e.response && e.response.status === 409) {
          return this.$message.error("用户名已存在");
        }
        this.$message.error("修改失败");
      }
    }
  }
};
</script>

<style lang="less">
.text {
  text-align: center;
  font-size: 12px;
}
</style>